<template>
  <div class="bg-grey">
    <div class="flex-middle-center font-xl bg-white py-2">
      <i :class="{'text-red': m.hostHot}"><small>{{m.hostRank}}</small>{{m.hostShort}}</i>
      <small class="text-grey mx-5">VS</small>
      <i :class="{'text-red': m.guestHot}">{{m.guestShort}}<small>{{m.guestRank}}</small></i>
    </div>

    <div class="flex-column flex-grow lh-25 bg-white m-3">
      <div class="d-flex" :class="{sg: m.had.isBetOne}" v-if="m.had">
        <small class="yield text-grey" :class="'bg-' + color(m.had.fixed)">{{m.had.fixed | sign}}</small>
        <div class="g box-xl" :class="on('spf|胜')" @click="select('spf|胜')">主胜<small>{{m.had.win}}</small></div>
        <div class="g box-xl" :class="on('spf|平')" @click="select('spf|平')">平<small>{{m.had.flat}}</small></div>
        <div class="g box-xl" :class="on('spf|负')" @click="select('spf|负')">客胜<small>{{m.had.lose}}</small></div>
      </div>
      <div v-else class="text-grey text-center bl-l bb-l br-l">未开售</div>

      <div class="d-flex" v-if="m.hhad">
        <small class="yield" :class="'bg-' + color(m.hhad.fixed)">{{m.hhad.fixed | sign}}</small>
        <div class="g box-xl" :class="on('rqspf|让球胜')" @click="select('rqspf|让球胜')">主胜<small>{{m.hhad.win}}</small></div>
        <div class="g box-xl" :class="on('rqspf|让球平')" @click="select('rqspf|让球平')">平<small>{{m.hhad.flat}}</small></div>
        <div class="g box-xl" :class="on('rqspf|让球负')" @click="select('rqspf|让球负')">客胜<small>{{m.hhad.lose}}</small></div>
      </div>
      <div v-else class="text-grey text-center bl-l bb-l br-l">未开售</div>
    </div>

    <div class="d-flex bg-white m-3" :class="{sg: m.crs.isBetOne}">
      <small class="yield bg-win br-l">比分</small>
      <div class="flex-grow">
        <div class="d-flex flex-grow flex-wrap">
          <div class="g box box-sm" :class="[{grow : e.grow}, on('bf|' + e.key)]" @click="select('bf|' + e.key)" v-for="e in scores.wi">
            <div>{{e.key}}</div>
            <small>{{e.val}}</small>
          </div>
        </div>
        <div class="d-flex flex-grow">
          <div class="g box box-sm" :class="[{grow : e.grow}, on('bf|' + e.key)]" @click="select('bf|' + e.key)" v-for="e in scores.ev">
            <div>{{e.key}}</div>
            <small>{{e.val}}</small>
          </div>
        </div>
        <div class="d-flex flex-grow flex-wrap">
          <div class="g box box-sm" :class="[{grow : e.grow}, on('bf|' + e.key)]" @click="select('bf|' + e.key)" v-for="e in scores.lo">
            <div>{{e.key}}</div>
            <small>{{e.val}}</small>
          </div>
        </div>
      </div>
    </div>

    <div class="d-flex bg-white m-3" :class="{sg: m.ttg.isBetOne}">
      <small class="yield bg-blue br-l">总进球</small>
      <div class="d-flex flex-grow flex-wrap">
        <div class="g box box-lg" :class="on('zjq|' + (e - 1))" @click="select('zjq|' + (e - 1))" v-for="e in 7">
          <div>{{e - 1}}球</div>
          <small>{{m.ttg['s' + (e - 1)]}}</small>
        </div>
        <div class="g box box-lg" :class="on('zjq|7')" @click="select('zjq|7')">
          <div>7+球</div>
          <small>{{m.ttg['s7']}}</small>
        </div>
      </div>
    </div>

    <div class="d-flex m-3" :class="{sg: m.hafu.isBetOne}">
      <small class="yield bg-purple br-l">半全场</small>
      <div class="d-flex flex-grow flex-wrap">
        <div class="g box box-md bg-white" :class="on('bqc|' + k)" @click="select('bqc|' + k)" v-for="(v, k) in results">
          <div>{{k}}</div>
          <small>{{v}}</small>
        </div>
      </div>
    </div>

    <div class="d-flex b-0" @click="$emit('hide')">
      <a class="btn btn-lg btn-secondary grow b-no rad-0">取消</a>
      <a class="btn btn-lg btn-danger grow b-no rad-0">确定</a>
    </div>

  </div>
</template>

<script>
import { mixin } from './calculator'

function compare (l, r) {
  var lk = l.key, rk = r.key
  var [q, w] = lk.split(':')
  var [x, y] = rk.split(':')
  return q - x + w - y
}

function wel (v) {
  return v.replace(/h/g, '胜')
  .replace(/d/g, '平')
  .replace(/a/g, '负')
}

export default {
  name: 'popup-hhgg',
  mixins: [mixin],
  computed: {
    results () {
      var {hafu} = this.m
      var obj = {}
      Object.keys(hafu).sort().reverse().map(k => {
        if (k == 'isBetOne') {
          return
        }
        obj[wel(k)] = hafu[k]
      })
      return obj
    },
    scores () {
      var crs = this.m.crs,
          wi  = [],
          ev  = [],
          lo  = []

      Object.keys(crs).forEach(k => {
        var val = crs[k]
        switch (k) {
          case '-1-h':
            wi.push({key: '胜其它', val, grow: true})
            return
          case '-1-d':
            ev.push({key: '平其它', val, grow: true})
            return
          case '-1-a':
            lo.push({key: '负其它', val, grow: true})
            return
          case 'isBetOne':
            return
        }

        var l = parseInt(k.substring(0, 2)),
            r = parseInt(k.substring(2))

        var o = {
          key: l + ':' + r,
          val
        }

        var x = l - r

        if (x > 0) {
          wi.push(o)
        } else if (x < 0) {
          lo.push(o)
        } else {
          ev.push(o)
        }
      })

      wi.sort(compare)
      lo.sort(compare)
      ev.sort(compare)
      return {wi, lo, ev}
    }
  }
}
</script>
